<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="7">
        <a-card :bordered="false">
          <div class="account-center-avatarHolder">
            <div class="avatar">
              <!-- <img src="../../assets/avator.png" /> -->
              <div class="ant-upload-preview" @click="uploadavatar=true" >
          <img src="../../assets/avator.png"/>
        </div>
    <AvatarModal v-if="uploadavatar" ref='modal' @closeavatar='closeavatar'></AvatarModal>
            </div>
            <div class="username">{{this.$store.state.athletename}}</div>
            <div class="bio">motoo</div>
          </div>
          <div class="account-center-detail">
            <p>
              <i class="title"></i>举重教练
            </p>
            <p>
              <i class="group"></i>省－市－区－单位－级别
            </p>
            <p>
              <i class="address"></i>
              <span>浙江省</span>
              <span>杭州市</span>
            </p>
          </div>
          <a-divider />

          <div class="account-center-tags">
            <!-- <div class="tagsTitle">身体数据</div> -->
            <a-row style="margin-top:20px">
              <a-col :span="16">
                <a-row type="flex" align="middle">
                  <a-col>
                    <h1>编码：{{this.$store.state.athleteid}}</h1>
                  </a-col>
                  <a-col>
                    <a-icon style="fontSize:25px;" type="edit" @click="EditVisible=true" />
                  </a-col>
                </a-row>
                <a-col
                  :span="12"
                  v-for="(item,i) in bodydata"
                  :key="item.name"
                  style="margin-top:8px"
                >
                  <a-col :span="12">{{item.akey}}：</a-col>
                  <a-col :span="12">
                    <template>{{ item.avalue }}</template>
                  </a-col>
                </a-col>
              </a-col>
            </a-row>
            <a-modal
              centered
              style="padding:0 !important"
              class="editModal"
              v-model="EditVisible"
              title="编辑运动员信息"
              @ok="handleEditSubmit"
            >
              <div>
                <a-form
                  id="formEdit"
                  class="user-layout-login"
                  ref="formEdit"
                  :form="formEdit"
                  @submit="handleEditSubmit"
                >
                  <a-col v-for="item in bodydata" :key="item.akey" :span="12">
                    <a-form-item :key="item.akey">
                      <a-col :span="6">{{item.akey}}：</a-col>
                      <a-col :span="16">
                        <a-input
                          type="text"
                          placeholder="请输入身体数据"
                          v-decorator="[item.akey, {initialValue: item.avalue}]"
                        />
                      </a-col>
                    </a-form-item>
                  </a-col>
                </a-form>
                <a-form
                  id="formAdd"
                  v-if="addable"
                  class="user-layout-login"
                  :form="formAdd"
                  @submit="handleEditSubmit"
                >
                  <a-col
                    v-for="(k, index) in formAdd.getFieldValue('keys')"
                    :key="k"
                    :span="12"
                    style="display:flex;align:center;text-align:center;vertical-align:middle"
                  >
                    <a-row type="flex">
                      <a-col :span="10">
                        <!-- <h1>{{k}}-{{index}}</h1> -->
                        <a-form-item :key="k">
                          <a-input
                            type="text"
                            placeholder="输入名称"
                            v-decorator="[`name[${k}]`, {rules: [{ required: true, pattern: /.*[^ ].*/, message: '请输入正确的名称' }], validateTrigger: 'blur'}]"
                          />
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-item :key="k">
                          <a-input
                            placeholder="输入身体数据"
                            v-decorator="[`value[${k}]`, {rules: [{ required: true, pattern: /.*[^ ].*/, message: '请输入正确的值' }], validateTrigger: 'blur'}]"
                          />
                        </a-form-item>
                      </a-col>
                      <a-col :span="2">
                        <a-icon
                          style="fontSize:25px;margin-top:4px"
                          type="minus-circle-o"
                          @click="() => remove(k)"
                        />
                      </a-col>
                    </a-row>
                  </a-col>
                </a-form>
                <a-col :span="12">
                  <a-button class="new-btn" type="dashed" @click="addItem">
                    <a-icon type="plus" />新增身体数据
                  </a-button>
                </a-col>
              </div>
            </a-modal>
          </div>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card
          style="width:100%"
          :bordered="false"
          :tabList="tabListNoTitle"
          :activeTabKey="noTitleKey"
          @tabChange="key => handleTabChange(key, 'noTitleKey')"
        >
          <Record v-if="noTitleKey === 'PracticeRecord'"></Record>
          <Achievement v-else-if="noTitleKey === 'Achievement'"></Achievement>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { Record, Achievement } from "./page";
import AvatarModal from '../../components/AvatarModal'

export default {
  components: {
    Record,
    Achievement,
    AvatarModal
  },
  data() {
    return {
      uploadavatar:false,
      formEdit: this.$form.createForm(this),
      EditVisible: false,
      editable: false,
      addable: false,
      additem: { name: "", data: "" },
      add: 0,
      bodydata: [],
      adddata: [],
      tabListNoTitle: [
        {
          key: "PracticeRecord",
          tab: "训练记录"
        },
        {
          key: "Achievement",
          tab: "我的成绩"
        }
      ],
      noTitleKey: "PracticeRecord"
    };
  },
  mounted() {
    this.$api.project
      .searchDocument({
        athleteid: this.$store.state.athleteid
      })
      .then(res => {
        this.bodydata = res.data.data;
      });
  },
  beforeCreate() {
    this.formAdd = this.$form.createForm(this, { name: "dynamic_form_item" });
    this.formAdd.getFieldDecorator("keys", {
      initialValue: [],
      preserve: true
    });
  },
  methods: {
    closeavatar(){this.uploadavatar=false;this.display()},
    display(){
      this.$api.project
      .searchDocument({
        athleteid: this.$store.state.athleteid
      })
      .then(res => {
        this.bodydata = res.data.data;
      });
    },
    addItem() {
      this.addable = true;
      let { formAdd } = this;
      // can use data-binding to get
      let keys = formAdd.getFieldValue("keys");
      let nextKeys = keys.concat(this.add++);
      // can use data-binding to set
      // important! notify form to detect changes
      formAdd.setFieldsValue({
        keys: nextKeys
      });
      console.log(formAdd.getFieldsValue());
    },
    remove(i) {
      let keys = this.formAdd.getFieldValue("keys");
      keys = keys.filter(key => key !== i);
      this.formAdd.setFieldsValue({
        keys
      });
      // this.formAdd.setFieldsValue(data)
      console.log(this.formAdd.getFieldsValue());
    },
    handleTabChange(key, type) {
      this[type] = key;
    },
    handleEditSubmit() {
      this.formEdit.validateFields((err, values) => {
        if (!err) {
          this.bodydata.map(item => {
            item.avalue = values[item.akey];
          });
          this.EditVisible = false;
          console.log(this.bodydata);
        }
      });
      this.formAdd.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          values.keys.map(item => {
            this.adddata.push({
              id: this.$store.state.athleteid,
              key: values.name[item],
              value: values.value[item]
            });
          });
        }
      });
      console.log(this.adddata);
      let edit = this.bodydata.map(item => {
        return {
          athleteid: this.$store.state.athleteid,
          akey: item.akey,
          avalue: item.avalue
        };
      });
      if (this.bodydata.length !== 0) {
        this.$api.project
        .editDocument(edit)
        .then(res => {
          if (res.data.code != 1000) this.requestFailed(res);
          else {
            this.$notification["success"]({
              message: "提示",
              description: "编辑成员信息成功",
              duration: 8
            });
          }
        })
        .catch(err => {
          this.requestFailed(err);
        });
      }
      if(this.adddata.length!==0){
        this.$api.project.addDocument(this.adddata).then(res => {
              if (res.data.code != 1000) this.requestFailed(res);
              else {
                this.formAdd.setFieldsValue({
                  keys: []
                });
                this.adddata = [];
                this.$notification["success"]({
                  message: "提示",
                  description: "添加成员信息成功",
                  duration: 8
                });
              }
            }).catch(err => {
          this.requestFailed(err);
        });;
      }
      this.display()
      console.log(this.bodydata);
    },
    requestFailed(err) {
      this.$notification["error"]({
        message: "错误",
        description: err.data.msg || "请求出现错误，请稍后再试",
        duration: 4
      });
      this.registerBtn = false;
    }
  }
};
</script>
<style>
.editModal .ant-modal-content .ant-modal-body {
  padding: 0px !important;
  /* min-height: 200px; */
}
</style>
<style lang="scss" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    & > .avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }

  .account-center-detail {
    p {
      margin-bottom: 8px;
      padding-left: 26px;
      position: relative;
    }

    i {
      position: absolute;
      height: 14px;
      width: 14px;
      left: 0;
      top: 4px;
      background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
    }

    .title {
      background-position: 0 0;
    }
    .group {
      background-position: 0 -22px;
    }
    .address {
      background-position: 0 -44px;
    }
  }

  .account-center-tags {
    .ant-tag {
      margin-bottom: 8px;
    }
  }
}
</style>
